﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>校园图书管理系统</title>
    <!-- For-Mobile-Apps-and-Meta-Tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/lib/element-ui/theme-chalk/index.min.css">
    <!-- 引入组件库 -->
    <script src="/lib/vue/dist/vue.min.js"></script>
    <script src="/lib/element-ui/index.min.js"></script>
    <script src="/lib/axios/axios.min.js"></script>
</head>

<body style="background:url('/imgs/loginbg.jpg');background-size: 100% 100%;background-repeat:no-repeat;width: 100%;height: 100vh;margin:0;">

    <div id="app">
        <h1>校园图书管理系统</h1>
        <div class="loginbody">
            <el-form label-width="70px" style="margin-top:40px;" :model="form">
                <el-form-item label="用户名">
                    <el-input placeholder="Please input username" v-model="form.UserName"/>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" placeholder="Please input password" show-password v-model="form.Password"/>
                </el-form-item>
                <el-form-item style="text-align:left;">
                    <el-checkbox label="记住密码" size="large"  v-model="form.Remember"  />
                </el-form-item>
                <el-button>取消</el-button>
                <el-button type="primary" plain v-on:click="onSubmit">登录</el-button>
                <br />
                <div class="reg">
                    <el-link type="warning" href="/Register" style="text-align:right;">注册</el-link>
                </div>
                
            </el-form>
        </div>
        <br />
        <br />
    </div>
    <div class="footer">
        <p> &copy; 2022-2023 校园图书管理系统. All Rights Reserved | Design by 小六公子</p>
    </div>
    
    <script>
       var app= new Vue({
            el: '#app',
            data:function() {
              return {
                form: {
                  UserName: '',
                  Password: '',
                  Remember: false,
                }
              }
            },
            methods: {
              onSubmit() {
                console.log('submit!');
                axios.post('/Login/Login', {
                    UserName: this.form.UserName,
                    Password: this.form.Password
                }).then(function (response) {
                    if(response.status==200){
                        var msg = response.data;
                        if(msg.code=="0"){
                            window.location="/Home";
                        }else{
                             window.alert(msg.message);
                        }
                    }
                    console.log(response);
                }).catch(function (error) {
                    console.log(error);
                });
              }
            }
          });
    </script>
    <style>
        #app{
            width:100%;
            height:60%;
            text-align:center;
            position:absolute;
            top:100px;
        }
        .el-input{
            height:35px;
            width:90%;
        }
        .el-button{
            width:120px;
            height:35px;
        }
        .loginbody{
            display: block;
            background: white;
            width: 25%;
            height: 300px;
            position: absolute;
            left: 38%;
            border-radius:5px;
        }
        .footer{
            position: absolute;
            bottom: 10px;
            display: flex;
            margin-bottom: 10px;
            left: 36%;
        }
        h1{
            color: white;
            font-size: 40px;
        }
        .reg{
            text-align: right;
            margin-right: 20%;
            margin-top: 10px;
        }
    </style>
</body>
</html>